<template>
    <div class="footerBtn van-hairline--top">
        <div class='footerFlex'>
          <div class='leftBtn'>
              <div style="display:flex;flex-direction:column;" v-bind:class="{ active: isActive1 }">
                 <van-icon size="24" name="cluster-o" style="line-height:20px;margin-top:4px;"/>
                <van-dropdown-menu direction="up" >
                  <van-dropdown-item v-model="value" :options="option" @change='changeBtn'/>
                </van-dropdown-menu>
              </div>
          </div>
          <div class='rightBtn'>
              <div style="display:flex;flex-direction:column" @click="toCenter" v-bind:class="{ active: isActive }">
                <van-icon size="24" name="friends-o" style="line-height:20px;margin-top:4px;"/>
                <div style="line-height:25px">个人中心</div>
              </div>
          </div>
        </div>
    </div>
</template>

<script>
import { 
    Button
    ,DropdownMenu
    , DropdownItem
    ,Icon  } from 'vant';
export default {
    name: 'footerBtn',
    components: {
        [Icon.name]:Icon,
        [Button.name]:Button,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
    },
    data () {
        return {
          isActive:false,
          isActive1:false,
          value: 0,
          option: [
            { text: '系统功能', value: 0 },
            { text: '委托单位信息注册', value: 1 },
            { text: '商品信息', value: 2 },
            { text: '标准信息注册', value: 3 },
            { text: '样品采集', value: 4 }
          ],
        }
    },
    created(){
      if(this.$route.path == '/center'){
        this.isActive = true
      }else{
        this.isActive = false
      }
      if(this.$route.path == '/'){
        this.isActive1 = true
      }else{
        this.isActive1 = false
      }
    },
    methods:{
      toCenter() {
        this.$router.push('/center')
      },
      changeBtn(value){
        switch (value) {
          case 0:
            console.log('不跳转')
            break
          case 1:
            this.$router.push({path:"/customeregister"});
            break
          case 2: 
            this.$router.push({path:"/productList"});
            break
          case 3: 
            this.$router.push({path:"/standardList"});
            break
          case 4: 
            this.$router.push({path:"/sampleList"});
            break
        }
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.footerBtn{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #f7f8fa
}
.footerFlex{
  display: flex;
}

.rightBtn{
  width: 50%;
  line-height: 50px;
}
.leftBtn{
  width: 50%;
  line-height: 50px;
}
.leftBtn .van-dropdown-menu{
  height: 25px;
  border:none
}
.leftBtn .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
  border:none
}
.active{
  font-weight: 700
}
</style>
